<template>
    <div id="d1">
        <!--搜索框-->
        <el-row>
            <el-col :span="12">
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item label="运动名称">
                        <el-input v-model="tempKeepName" placeholder="运动名称"></el-input>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="5">
              <el-button type="primary" @click="search">查询</el-button>
            </el-col>
          <el-col :span="6">
              <el-button type="primary" @click="dialogFormVisible = true">添加运动项目</el-button>
          </el-col>
        </el-row>
        <!--表格-->
        <el-table :data="tableData" style="width: 100%">
            <el-table-column fixed prop="tempKeepId" label="编号" width="100"></el-table-column>
            <el-table-column fixed prop="tempKeepName" label="运动名称" width="100"></el-table-column>
            <el-table-column prop="tempKeepIntensity" label="运动强度" width="100"></el-table-column>
            <el-table-column prop="tempKeepTime" label="运动时间" width="150"></el-table-column>
            <el-table-column prop="tempKeepAge" label="年龄区间" width="150"></el-table-column>
            <el-table-column prop="tempKeepDesc" label="运动描述" width="300"></el-table-column>
            <el-table-column prop="tempWhoState" label="是否启用" width="100" :formatter="formatState"></el-table-column>
            <el-table-column  fixed="right" label="操作" width="250">
                <template slot-scope="scope">
                    <el-button  type="text" @click="updateKeep(scope.row.tempKeepId)">修改</el-button>
                    <el-button  type="text" @click="deleteKepp(scope.row.tempKeepId)"> 删除 </el-button>
                    <el-button  type="text" v-show="scope.row.tempWhoState==0" @click="sta(scope.row.tempKeepId)"> 禁用 </el-button>
                    <el-button  type="text" v-show="scope.row.tempWhoState==1" @click="state(scope.row.tempKeepId)">启用 </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页控件-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 15, 20, 30, 40]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
        <!--
            @size-change：页大小发生改变时触发
            @current-change：当前页发生改变时触发
            :current-page： 用于设置当前页
            :page-size：用于设置默认的页大小
            :total：用于设置总记录数
        -->
        <el-dialog title="添加运动项目" :visible.sync="dialogFormVisible">
        <el-form :model="keep" :rules="rules" ref="foodRules">
          <el-form-item label="运动名称" :label-width="formLabelWidth" prop="tempKeepName" class="common">
            <el-input v-model="keep.tempKeepName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="运动强度（小，中，大）" :label-width="formLabelWidth" prop="tempKeepIntensity" class="common">
            <el-input v-model="keep.tempKeepIntensity" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="运动时间" :label-width="formLabelWidth" prop="tempKeepTime" class="common">
            <el-input v-model="keep.tempKeepTime" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="年龄区间" :label-width="formLabelWidth" prop="tempKeepAge" class="common">
            <el-input v-model="keep.tempKeepAge" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="运动描述" :label-width="formLabelWidth" prop="tempKeepDesc" class="common">
            <el-input v-model="keep.tempKeepDesc" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="是否启用" :label-width="formLabelWidth" prop="tempWhoState" class="common">
            <el-select v-model="keep.tempWhoState" placeholder="请选择使用状态">
              <el-option label="启用" value="0"></el-option>
              <el-option label="不启用" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="insertKeep('foodRules')">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="修改运动信息" :visible.sync="dialogVisible">
        <el-form :model="keeps" :rules="rules" ref="fromRule">
          <el-form-item label="运动名称" :label-width="formLabelWidth" prop="tempKeepName" class="common">
            <el-input v-model="keeps.tempKeepName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="运动强度（小，中，大）" :label-width="formLabelWidth" prop="tempKeepIntensity" class="common">
            <el-input v-model="keeps.tempKeepIntensity" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="运动时间" :label-width="formLabelWidth" prop="tempKeepTime" class="common">
            <el-input v-model="keeps.tempKeepTime" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="年龄区间" :label-width="formLabelWidth" prop="tempKeepAge" class="common">
            <el-input v-model="keeps.tempKeepAge" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="运动描述" :label-width="formLabelWidth" prop="tempKeepDesc" class="common">
            <el-input v-model="keeps.tempKeepDesc" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="UpKeep('fromRule')">确 定</el-button>
        </div>
      </el-dialog>
    </div>
</template>
<script>
export default {
  name: 'keep',
  data () {
    return {
      dialogFormVisible: false,
      dialogVisible: false,
      tableData: [],
      currentPage: 1, // 当前页
      pageSize: 5,
      total: 0,
      tempKeepName: '',
      formLabelWidth: '165px',
      keep: {},
      keeps: {},
      rules: {
        tempKeepName: [
          { required: true, message: '请输入运动名称', trigger: 'blur' }
        ],
        tempKeepIntensity: [
          { required: true, message: '请输入运动强度', trigger: 'blur' }
        ],
        tempKeepTime: [
          { required: true, message: '请输入运动时间', trigger: 'blur' }
        ],
        tempKeepAge: [
          { required: true, message: '请输入运动年龄区间', trigger: 'blur' }
        ],
        tempKeepDesc: [
          { required: true, message: '请输入对运动的描述', trigger: 'blur' }
        ],
        tempWhoState: [
          { required: true, message: '请选择使用状态', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    initBookData () {
      this.$axios.get(`/api/LljTemplateKeepServlet?pageNum=${this.currentPage}&pageSize=${this.pageSize}&tempKeepName=${this.tempKeepName}`).then(result => {
        this.tableData = result.data.rows
        this.total = result.data.total
      })
    },
    // 格式化状态
    formatState (row, column, cellValue, index) {
      return row.tempWhoState === 0 ? '正常' : row.tempWhoState === 1 ? '禁用' : '未知'
    },
    handleSizeChange (value) { // value是在页大小下拉框选择的值
      this.pageSize = value
      this.initBookData()
    },
    handleCurrentChange (value) { // value是当前页码
      this.currentPage = value
      this.initBookData()
    },
    search () {
      this.currentPage = 1
      this.initBookData()
    },
    deleteKepp (tempKeepId) {
      this.$confirm('此操作将删除该运动, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete(`/api/LljTemplateKeepServlet/${tempKeepId}`).then(result => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.initBookData()
        })
      }).catch(() => {
        this.$message('已取消删除')
      })
    },
    insertKeep (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm('此操作将添加该运动, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$axios.post(`/api/LljTemplateKeepServlet`, this.keep).then(result => {
              this.$message({
                type: 'success',
                message: '添加成功!'
              })
              this.keep = {}
              this.dialogFormVisible = false
              this.initBookData()
            })
          }).catch(() => {
            this.$message('已取消添加')
          })
        } else {
          return false
        }
      })
    },
    updateKeep (tempKeepId) {
      this.dialogVisible = true
      this.$axios.get(`/api/LljTemplateKeepServlet/${tempKeepId}`).then(result => {
        this.keeps = result.data
      })
    },
    state (tempKeepId) {
      this.$confirm('确定要启动？, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.put(`/api/LljTemplateKeepServlet/state?tempKeepId=${tempKeepId}&tempWhoState=0`).then(result => {
          this.$message({
            type: 'success',
            message: '启用成功!'
          })
          this.initBookData()
        })
      }).catch(() => {
        this.$message('已取消操作')
      })
    },
    sta (tempKeepId) {
      this.$confirm('确定要禁用吗？, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.put(`/api/LljTemplateKeepServlet/state?tempKeepId=${tempKeepId}&tempWhoState=1`).then(result => {
          this.$message({
            type: 'success',
            message: '禁用成功!'
          })
          this.initBookData()
        })
      }).catch(() => {
        this.$message('已取消操作')
      })
    },
    UpKeep (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm('此操作将修改该运动, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$axios.put(`/api/LljTemplateKeepServlet`, this.keeps).then(result => {
              this.$message({
                type: 'success',
                message: '修改成功!'
              })
              this.dialogVisible = false
              this.initBookData()
            })
          }).catch(() => {
            this.$message('已取消修改')
          })
        } else {
          return false
        }
      })
    }
  },
  created () {
    this.initBookData()
  }
}
</script>

<style>
.common{
  margin-top: 23px;
}
</style>
